import React, { FC, useEffect } from "react";
import {
  Typography,
  Button,
  Space,
  Form,
  Input,
  Checkbox,
  message,
} from "antd";
import { LoginOutlined } from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";
import styles from "./login.module.scss";
import { loginSer } from "../../services/user";
import { useRequest } from "ahooks";
import { MANAGE_PATH_LIST } from "../../router";
import { setToken } from "../../utils/user-token";

// 本地存储
const USERNAME_kEY = "username";
const PASSWORD_kEY = "password";
function rememberUser(username: string, password: string) {
  localStorage.setItem(USERNAME_kEY, username);
  localStorage.setItem(PASSWORD_kEY, password);
}
function deleteUserInfo() {
  localStorage.removeItem(USERNAME_kEY);
  localStorage.removeItem(PASSWORD_kEY);
}
function getUserInfo() {
  return {
    username: localStorage.getItem(USERNAME_kEY),
    password: localStorage.getItem(PASSWORD_kEY),
  };
}

type FieldType = {
  username: string;
  password: string;
  remember: boolean;
};

const { Title } = Typography;
/////////////////////////
const Login: FC = () => {
  const nav = useNavigate();
  const [form] = Form.useForm();

  useEffect(() => {
    const { username, password } = getUserInfo();
    form.setFieldsValue({ username, password });
  });

  async function loginfn(values: FieldType) {
    const { username, password } = values;
    const data = await loginSer(username, password);
    return data;
  }
  const { run: handleLogin } = useRequest(loginfn, {
    manual: true, // 手动触发
    onSuccess: (res) => {
      const { token = "" } = res;
      setToken(token); // 存储token
      message.success("登录成功");
      nav(MANAGE_PATH_LIST);
    },
  });

  const onFinish = (values: FieldType) => {
    const { username, password, remember } = values || {};
    if (remember) {
      rememberUser(username, password);
    } else {
      deleteUserInfo();
    }
    handleLogin(values);
  };

  return (
    <div className={styles.container}>
      <Space>
        <Title level={2}>
          <LoginOutlined />
        </Title>
        <Title level={3}>用户登录</Title>
      </Space>
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 16 }}
        onFinish={onFinish}
        form={form}
      >
        <Form.Item label="账号" name="username">
          <Input />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 4, span: 20 }}
          initialValue={{ remember: true }}
        >
          <Checkbox>记住密码</Checkbox>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Link to="/register">去注册一个账号</Link>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;
